<template>

   <el-container>
  <el-main>
    <el-form :model="question" style="width: 100%;hight: 70%">
  <el-form-item >
    <template v-if="question.number">
    {{ question.number  + '、'+ question.content}}
    </template>
  </el-form-item>
  <el-form-item v-if="question.number">
    <el-radio v-model="choose" label="A" border>{{question && question.options && question.options[0]}}</el-radio>
  </el-form-item>
  <el-form-item v-if="question.number">
    <el-radio v-model="choose" label="B" border>{{question && question.options && question.options[1]}}</el-radio>
  </el-form-item>
  <el-form-item v-if="question.number">
    <el-radio v-model="choose" label="C" border>{{question && question.options && question.options[2]}}</el-radio>
  </el-form-item>
  <el-form-item v-if="question.number">
    <el-radio v-model="choose" label="D" border>{{question && question.options && question.options[3]}}</el-radio>
  </el-form-item>
</el-form>
  </el-main>
  <el-footer>
    <el-row :gutter="20" type="flex" justify="start">
  <el-button-group>
  <el-button size="mini" type="info" icon="el-icon-arrow-left" @click="prePage" :disabled="isFirstPage || !question.number">上一题</el-button>
  <el-button size="mini" type="info"  @click="nextPage" :disabled="isLastPage || !question.number">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
</el-row>
<el-row :gutter="20" type="flex" justify="start">
        <input v-model="input" placeholder="请输入题号" type="number" size="mini" :disabled="!question.number">
      <el-button class="button-class" size="mini" type="info" @click="somePage" :disabled="!question.number">前往</el-button>
</el-row>
  </el-footer>
</el-container>
</template>

<script>
  export default {
    data() {
      return {
        input: this.currentIndex,
        choose: '',
        questions: [],
        currentIndex: 0,
        question: {}
      };
    },
    computed: {
      isFirstPage() {
        return this.currentIndex === 1
      },
      isLastPage(){
        return this.currentIndex === parseInt(window.localStorage.getItem('maxIndex'))
      }
    },
    watch: {
      choose: {
      handler (val, oldVal) {
        if (val !== '') {
          this.judge()
        }
      },
      deep: true
    }
    },
    created () {
      let questions = JSON.parse(window.localStorage.getItem('questions'))
      if(questions){
        this.questions = questions
        this.getCurrentQuestion()
      }
    },
    methods: {
      addToErrorIds(id){
        let set = new Set()
        let oldSet = JSON.parse(window.localStorage.getItem('errorIds'))
        if(oldSet){
          set = new Set(oldSet)
        }
        set.add(id)
        window.localStorage.setItem('errorIds',JSON.stringify(set))
      },
      clearChoose(){
        this.choose = ''
      },
      prePage(){
        window.localStorage.setItem('currentIndex',this.currentIndex-1)
        this.clearChoose()
        this.getCurrentQuestion()
      },
      nextPage(){
        window.localStorage.setItem('currentIndex',this.currentIndex+1)
        this.clearChoose()
        this.getCurrentQuestion()
      },
      somePage(){
        if(this.input <= 0 || this.input > parseInt(window.localStorage.getItem('maxIndex'))){
          this.$message.error('请输入正确的题号！');
          return
        }
        window.localStorage.setItem('currentIndex',this.input)
        this.clearChoose()
        this.getCurrentQuestion()
      },
      getCurrentQuestion(){
        this.currentIndex = parseInt(window.localStorage.getItem('currentIndex'))
        let question = this.questions.filter(x => x.number === this.currentIndex)[0]
        if(question){
          this.question = question 
        }
      },
      judge(){
        if(this.choose === ''){
          return
        }
        if(this.choose !== this.question.answer){

          this.addToErrorIds(this.question.number)

          this.$message(
            {
              message: '正确答案是：'+this.question.answer,
              type: 'error',
              duration: 1000
            }
          );
        }else{
          this.$message(
            {
              message: '回答正确！',
              type: 'success',
              duration: 1000
            }
          );
        }
      },
       preview(event){
        let file = document.getElementById('files').files[0]
        if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
}
       }
    }
  }
</script>
<style lang="scss">
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

.button-class {
    margin-left: 40px;
}
</style>